<%@ page language="java" contentType="text/html; charset=UTF-8"
                pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户注册页面</title>
    <style type="text/css">
        table{
            border: 1px solid blue;
            border-collapse: collapse;
            width: 600px;
            margin: 100px auto;
        }
        table td,table th{
            border: 1px solid blue;
            padding: 20px;
        }
    </style>
    <script type="text/javascript" src="<c:url value='/js/jquery-1.6.4.min.js'/>"></script>
</head>
<body>
message=${message}<br/>
<h1  align="center">用户注册</h1>
<form  action="<c:url value='/user/regist.action'/>" method="post"
       id="form_regist" enctype="multipart/form-data"  onsubmit="return(myOnSubmit());">
    <table>
        <tr><th style="width:120px;">用户名字:</th><td><input  type="text" name="uname" value="abc123" id="text_uname"/><span id="span_uname"></span></td></tr>
        <tr><th>用户密码:</th><td><input  type="text" name="upwd"  value="123456" id="text_upwd"/><span id="span_upwd"></span></td></tr>
        <tr><th>重复密码:</th><td><input  type="text" name="urepwd"  value="123456" id="text_urepwd"/><span id="span_urepwd"></span></td></tr>
        <tr><th>电话号码:</th><td><input  type="text" name="uphone"  value="13838107879" id="text_uphone"/><span id="span_uphone"></span></td></tr>
        <tr><th>邮箱地址:</th><td><input  type="text" name="uemail" value="1@1.q" id="text_uemail"/><span id="span_uemail"></span></td></tr>
        <tr><th>用户性别:</th>
            <td>男：<input  type="radio" name="usex" value="男" checked="checked"/> | 女：<input  type="radio" name="usex" value="女"/>
            <span id="span_usex"></span></td>
        </tr>
        <tr><th>头像上传:</th><td><input  type="file" name="uphotoFile" id="text_uphoto"/><span id="span_uphoto"></span></td></tr>
        <tr><th colspan="2"><input  type="reset" value="重填"/>  &nbsp; &nbsp; &nbsp; &nbsp;
            <input  type="submit" value="注册"/></th></tr>
    </table>
</form>
<script type="text/javascript">
    var  bUnameEnable=false;
    //写一个方法判断值是否正确
    function pd(node,nodeRegexp,span){
        //必须6位数字
        var value=node.val();
        if(nodeRegexp.test(value)){
            span.text("密码格式正确");
            span.css({"color":"blue","font-weight":"normal","font-size":"18px"});
            return true;
        }
        span.text("密码格式错误!");
        span.css({"color":"red","font-weight":"bold","font-size":"18px"});
        return false;
    }
    //写一个方法 判断uname
    function pdUname(){
          return pd($("#text_uname"), /[a-zA-Z][A-Za-z0-9]{5,7}/,$("#span_uname"));
    }
    //写一个方法 判断upwd
    function pdUpwd(){
        return pd($("#text_upwd"), /[0-9]{6}/,$("#span_upwd"));
    }
    //写一个方法 判断uphone
    function pdUphone(){
        return pd($("#text_uphone"), /1[3456789][0-9]{9}/,$("#span_uphone"));
    }
    //写一个方法 判断uemail
    function pdUemail(){
        return pd($("#text_uemail"), /[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]+/,$("#span_uemail"));
    }
    //写一个方法 判断urepwd
    function pdUrepwd(){
        var urepwd=$("#text_urepwd").val();
        var upwd=$("#text_upwd").val();
        if(urepwd==upwd&&pdUpwd()){
            $("#span_urepwd").text("重复密码正确");
            $("#span_urepwd").css({"color":"blue","font-weight":"normal","font-size":"18px"});
            return true;
        }
        $("#span_urepwd").text("重复密码错误!");
        $("#span_urepwd").css({"color":"red","font-weight":"bold","font-size":"18px"});
        return false;
    }
    //文件域失去焦点
    function pdUphoto(){
        var uphoto=$("#text_uphoto").val();
        if(uphoto){ return true; }
        $("#span_uphoto").text("必须上传照片");
        $("#span_uphoto").css({"color":"blue","font-weight":"bold","font-size":"10px"});
        return false;
    };
    $(function(){
        //文档加载成功时 给用户名添加失去焦点事件  通过ajax判断用户名是否可用
        $("#text_uname").bind("blur",function(){
                var  bName=pdUname();//判断uname格式是否正确
                if(bName){
                    //再通过ajax判断是否可用：是否已经存在
                    $.ajax({
                          url:"<c:url value='/user/ajaxPdUname.action'/>",
                          type:"GET",
                          dataType:"text",
                          data:"uname="+$("#text_uname").val(),
                          async:true,
                          success: function(data){
                                  if(data=="enable"){
                                        //更改span的文本内容
                                        $("#span_uname").text("用户名可用");
                                        $("#span_uname").css({"color":"blue","font-weight":"bold","font-size":"18px"});
                                        bUnameEnable=true;
                                  }else{
                                      //更改span的文本内容
                                      $("#span_uname").text("用户名已存在!");
                                      $("#span_uname").css({"color":"red","font-weight":"bold","font-size":"18px"});
                                      bUnameEnable=false;
                                  }
                          }
                    });
                }
        });
        //alert(bUname+":"+bUpwd+":"+bUrepwd+":"+bUphone+":"+bUemail);
        //文档加载成功  所有的span添加*
        $("#form_regist span").css("margin-left","10px");
        $("#form_regist span").text("*");
        $("#form_regist span").css({"color":"red","font-weight":"bold","font-size":"18px"});

        //给所有的text设置失去焦点和获取焦点的事件

        $("#text_upwd").bind("blur",pdUpwd);
        $("#text_urepwd").bind("blur",pdUrepwd);
        $("#text_uemail").bind("blur",pdUemail);
        $("#text_uphone").bind("blur",pdUphone);

        $("#text_uname").bind("focus",function(){
            setSpanStyle($("#span_uname"),"必须由字母开头 6-8位数字字母组成");
        });
        $("#text_upwd").bind("focus",function(){
            setSpanStyle($("#span_upwd"),"必须6位数字组成");
        });
        $("#text_urepwd").bind("focus",function(){
            setSpanStyle($("#span_urepwd"),"必须和密码相同");
        });
        $("#text_uphone").bind("focus",function(){
            setSpanStyle($("#span_uphone"),"必须是11位数字");
        });
        $("#text_uemail").bind("focus",function(){
            setSpanStyle($("#span_uemail"),"格式必须如x@x.x");
        });
    });
    //写一个方法  当text获取焦点时  更改对应的span的样式
    function setSpanStyle(span,message){
        span.val("");
        span.text(message);
        span.css({"color":"blue","font-weight":"bold","font-size":"10px"});
    }
    //写一个方法  表单提交时  如果使用验证通过  才能提交成功！
    function myOnSubmit(){
        var bUname=pdUname();
        var bUpwd=pdUpwd();
        var bUrepwd=pdUrepwd();
        var bUphone=pdUphone();
        var bUemail=pdUemail();
        var bUphoto=pdUphoto();
        return bUname&&bUpwd&&bUrepwd&&bUphone&&bUemail&&bUphoto&&bUnameEnable;
    }
</script>
</body>
</html>